<template>
  <div>
    <div>疫情人数对全球经济影响</div>
    <div id="currentAdd"></div>
    <div id="only">全球各国疫情人数占比情况</div>
    <div id="cirle"></div>
  </div>
</template>

<script>
let echarts = require("echarts");
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    getOption() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "rgb(115, 192, 222)",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: {
              show: true,
              readOnly: false,
            },
            magicType: {
              show: true,
              type: ["line", "bar"],
            },
            restore: {
              show: true,
            },
            saveAsImage: {
              show: true,
            },
          },
        },
        legend: {
          data: ["月感染人数", "全球月度gdp"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "月感染人数",
            min: 0,
            max: 500,
            interval: 50,
            axisLabel: {
              formatter: "{value} 万人",
            },
          },
          {
            type: "value",
            name: "全球月度gdp",
            min: 50000,
            max: 80000,
            interval: 3000,
            axisLabel: {
              formatter: "{value} 亿美元",
            },
          },
        ],
        series: [
          {
            name: "月感染人数",
            type: "bar",
            data: [2, 18, 68, 108, 198, 188, 256, 269, 220, 350, 402, 480],
            color: "#fac858",
          },
          {
            name: "全球月度gdp",
            type: "line",
            yAxisIndex: 1,
            color: "rgb(115, 192, 222)",
            data: [
              79000,
              76000,
              74000,
              72000,
              73000,
              69000,
              66000,
              66000,
              63000,
              64000,
              57000,
              56800,
            ],
          },
        ],
      };
    },
    getOP() {
      return {
        tooltip: {
          trigger: "item",
          formatter: "{b}疫情人数占比: ({d}%)",
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: "center",
          data: ["美国", "印度", "巴西", "俄罗斯", "中国", "其他国家"],
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              {
                value: 800,
                name: "美国",
                label: {
                  backgroundColor: "#eee",
                  borderColor: "#777",

                  rich: {
                    title: {
                      color: "#eee",
                      align: "center",
                    },
                    abg: {
                      backgroundColor: "#333",
                      width: "100%",
                      align: "right",
                      height: 25,
                    },
                    Sunny: {
                      height: 30,
                      align: "left",
                      backgroundColor: {},
                    },
                    Cloudy: {
                      height: 30,
                      align: "left",
                      backgroundColor: {},
                    },
                    Showers: {
                      height: 30,
                      align: "left",
                      backgroundColor: {},
                    },
                    weatherHead: {
                      color: "#333",
                      height: 24,
                      align: "left",
                    },
                    hr: {
                      borderColor: "#777",
                      width: "100%",
                      borderWidth: 0.5,
                      height: 0,
                    },
                    value: {
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: "left",
                    },
                    valueHead: {
                      color: "#333",
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: "center",
                    },
                    rate: {
                      width: 40,
                      align: "right",
                      padding: [0, 10, 0, 0],
                    },
                    rateHead: {
                      color: "#333",
                      width: 40,
                      align: "center",
                      padding: [0, 10, 0, 0],
                    },
                  },
                },
              },

              {
                value: 10,
                name: "中国",
              },
              {
                value: 300,
                name: "英国",
              },
              {
                value: 735,
                name: "其他国家",
              },

              {
                value: 281,
                name: "俄罗斯",
              },
              {
                value: 450,
                name: "巴西",
              },
              {
                value: 650,
                name: "印度",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },

    toDraw() {
      let chart = echarts.init(document.getElementById("currentAdd"));
      let option = this.getOption();
      chart.setOption(option);

      let chart1 = echarts.init(document.getElementById("cirle"));
      let op = this.getOP();
      chart1.setOption(op);
    },
  },
  created() {},
  mounted() {
    this.toDraw();
  },
};
</script>
<style scoped>
#currentAdd {
  height: 550px;
  /* width: 1000px; */
  margin-bottom: 35px;
}

#cirle {
  height: 450px;
}
</style>